<template>
    <CommonModal v-model:show="modalShow" :title="modalTitle" @onSubmit="onSubmit" style="width: 600px">
        <n-form
            ref="modalFormRef"
            :model="modalForm"
            :inline="false"
            :rules="rules">
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="24" label="资源类型" path="type">
                <n-select :options="remoteResourceType" v-model:value="modalForm.type">
                </n-select>
              </n-form-item-gi>
              <n-form-item-gi :span="24" label="资源名称" path="resourceName">
                <n-input v-model:value="modalForm.resourceName" clearable placeholder="请输入资源名称"/>
              </n-form-item-gi>
              <n-form-item-gi :span="24" label="是否公开" path="resourceName">
                <n-input v-model:value="modalForm.isPublic" clearable placeholder="请输入资源名称"/>
              </n-form-item-gi>
              <n-form-item-gi :span="12" label="IP" path="host">
                <n-input v-model:value="modalForm.host" clearable placeholder="请输入IP"/>
              </n-form-item-gi>
              <n-form-item-gi :span="12" label="端口" path="port">
                <n-input v-model:value="modalForm.port" clearable placeholder="请输入端口号"/>
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="是否需要验证" path="isAuth">
                 <n-radio-group
                    v-model:value="modalForm.isAuth"
                    name="left-size"
                    style="margin-bottom: 12px"
                    default-value="0"
                 >
                  <n-radio-button value="1">
                    是
                  </n-radio-button>
                  <n-radio-button value="0">
                    否
                  </n-radio-button>
                </n-radio-group>
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="是否使用HTTPS" path="needSsl">
                <n-radio-group
                    v-model:value="modalForm.needSsl"
                    name="left-size"
                    style="margin-bottom: 12px"
                    :default-value="false"
                >
                  <n-radio-button :value = 'true'>
                    是
                  </n-radio-button>
                  <n-radio-button :value="false">
                    否
                  </n-radio-button>
                </n-radio-group>
              </n-form-item-gi>
              <n-form-item-gi v-if="modalForm.isAuth === '1'" :span="12" label="账号" path="username">
                  <n-input v-model:value="modalForm.username" clearable placeholder="请输入账号"/>
              </n-form-item-gi>
              <n-form-item-gi v-if="modalForm.isAuth === '1'" :span="12" label="密码" path="password">
                  <n-input v-model:value="modalForm.password" clearable placeholder="请输入密码"/>
              </n-form-item-gi>
            </n-grid>
        </n-form>
    </CommonModal>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import CommonModal from "@/components/commonModal/index.vue";
import {useCommonModal} from "@/components/commonModal/useCommonModal";
import { resourceController } from "@/api/resource/resourceController.api";
import {remoteResourceType,isPublicOption} from '@/views/resource'
export default defineComponent({
    name: "UserEditForm",
    components: {
        CommonModal
    },
    setup() {
        const {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds
        } = useCommonModal("Stable Diffusion", {
                needSsl: false,
                isAuth: "0"
            },
            resourceController.addSDResource,
            resourceController.updateResource,resourceController.deleteResource,resourceController.deleteBatch
        )



        const rules = {
            deptId: {type: "number", required: true, message: "请选择归属部门", trigger: ['blur', 'change']},
            status: {type: "string", required: true, message: "请选择状态", trigger: ["blur", "change"]},
            postIds: {type: "array", required: true, message: "请选择岗位", trigger: ["blur", "change"]},
            roleIds: {type: "array", required: true, message: "请选择角色", trigger: ["blur", "change"]},
            userName: {type: "string", required: true, message: "请输入用户名", trigger: ["input", "blur"]},
            nickName: {type: "string", required: true, message: "请输入用户昵称", trigger: ["input", "blur"]},
        }


        return {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            rules,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds,remoteResourceType,isPublicOption
        }
    }
})
</script>

<style scoped>

</style>
